<template>
	<view class="flex-col homepage" style="background-color: #3478F7;">
		<view class="" style="background-color: white;">
			<view class="flex-row wrapper">
					<u-image class="image"
						src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-55dbb834-9ba8-4068-98ca-c341f6402e27/69f5dc05-effa-4a05-b56c-7185a5b73dca.png"
						width="112rpx" height="110rpx" shape="circle"></u-image>
					<view class="flex-col flex-row wraper-col">
						<view class="u-line-1 text">{{this.user.userName}}</view>
						<view class="u-line-1 text-two">{{this.user.phone}}</view>
						
					</view>
					<u-icon class="icon-chat-fill" name="chat-fill" :size="54" @click="tzmyxx()"></u-icon>
				</view>
				<u-form-item class="formItem" label="我的房屋"  :label-width="140" @click="tzmyfy()"></u-form-item>
				<u-divider class="divider"></u-divider>
				<u-form-item class="formItem" label="我的车位" :label-width="140" @click="tzmycw()"></u-form-item>
				<u-divider class="divider" :margin-bottom="10"></u-divider>
				<u-form-item class="formItem-two" label="我的车辆" :label-width="140" @click="tzmycl()"></u-form-item>
				<u-form-item class="formItem" label="缴费记录" :label-width="140"></u-form-item>
				<u-divider class="divider"></u-divider>
				<u-form-item class="formItem-two" label="访客记录" @click="fkjl()" :label-width="140"></u-form-item>
				<view class="dbbox">
					<view >
					    <u-icon class="dibu" name="home" @click="sy()" :size="30" label="首页" :label-size="16" label-pos="bottom"></u-icon>
					    <u-icon class="dibu" name="home" @click="tz()" :size="30" label="服务" :label-size="16" label-pos="bottom"></u-icon>
					    <u-icon class="dibu" name="home" @click="tzwod()" :size="30" label="我的" :label-size="16" label-pos="bottom"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
</template>
<script>
	export default {
		data() {
			return {
				user:{}
			}
		},
		onLoad() {
				this.user = uni.getStorageSync('user')
			
		},
		methods: {
			sy(){
				uni.navigateTo({
				    url: '../gwb/index',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			},
			tz(){
				uni.navigateTo({
				    url: '../wjx/service',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			},
			tzwod(){
				uni.navigateTo({
				    url: '../wjx/Myprofile',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			},fkjl(){
				uni.navigateTo({
				    url: '../wjx/visitorstorecord',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			},
			tzmyfy(){
				uni.navigateTo({
				    url: '../wjx/myHome',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			},
			tzmycl(){
				uni.navigateTo({
				    url: 'car/Myvehicle',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			},
			tzmyxx(){
				uni.navigateTo({
				    url: '../gwb/maintenance',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			},
			//跳转车位
			tzmycw(){
				uni.navigateTo({
				    url: '../xss/carport',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 99%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}
.dbbox{
		position: fixed;
		width: 1200rpx;
		bottom: 0px;
		margin-left: -2px;
		background: #dbf1e1;
	}
	.dibu{
		float: left;
		margin-left: 70px;
	}
	.flex-col {
		// display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 190rpx 0rpx -5rpx 0rpx;
		background: #f2f6fc no-repeat;

		.wrapper {
			background-color: #3478F7;
			width: 100%;
			height: 120px;
			margin: 0rpx 0rpx 52rpx 0rpx;

			.image {
				margin-right: 24rpx;
			}

			.wraper-col {
				width: 236rpx;
				margin-right: 228rpx;
				.text {
					width: 190rpx;
					margin-bottom: 10rpx;
				}

				.text-two {
					width: 100%;
				}
			}

			.icon-chat-fill {
				margin-top: 68rpx;
			}
		}

		.formItem {
			width: 710rpx;
			margin-right: auto;
			margin-left: auto;
			flex: 0;
		}

		.divider {
			width: 746rpx;
			height: 38rpx;
		}

		.formItem-two {
			width: 710rpx;
			margin-right: auto;
			margin-bottom: 204rpx;
			margin-left: auto;
			flex: 0;
		}

		.wrapper-two {
			width: 466rpx;
			justify-content: space-between;
			margin-left: 132rpx;
			padding-right: 2rpx;
		}
	}
</style>
